<template>
	<view class="out-main">
		<view class="main">
			<view class="earth-box">
				<view class="monster-box" @click="playRotate">
					<view class="progress" v-if="monsterRotate">
						<u-count-down ref="countDown" :time="countTime" format="HH:mm:ss" :autoStart="true"
							:millisecond="true" @change="timechange" @finish="timeEnd" />
					</view>
					<image class="monster" src="../../static/monster1.png" mode="widthFix"
						:class="monsterRotate?'beginClass':'endClass'" />
				</view>
			</view>
			<view class="top-box">
				<view class="top-left">
					<view class="left-top">
						<image src="../../static/Maskgroup.png" mode="widthFix" />
						<image class="title-img" src="../../static/logititle.png" mode="widthFix" />
					</view>
					<view class="left-bottom">
						<image class="image-gold" src="../../static/gold.png" mode="widthFix" />
						<view class="gold-text">
							<text>{{$t('gaming.value')}}</text>
							<text class="gold-value">{{userInfo.rewardValue}}</text>
						</view>
					</view>
				</view>
				<view class="top-right">
					<view class="right-bth" @click="ruleBth">
						<image src="../../static/ruleimg.png" mode="widthFix" />
						<text>{{$t('gaming.rule')}}</text>
					</view>
					<view class="right-bth" @click="navigatorTo('personal/personal')">
						<image src="../../static/setimg.png" mode="widthFix" />
						<text>{{$t('system.navtitle')}}</text>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<view class="aciton-bth" @click="tovideo">
					<view class="noAuth">
						<image src="../../static/Vector-1.png" mode="scaleToFill" />
						<text>{{$t('gaming.tips2')}}</text>
					</view>
				</view>
				<view class="aciton-bth news">
					<view class="noAuth" @click="navigatorTo('transferGift/transferGift')">
						<image src="../../static/Vector-3.png" mode="scaleToFill" />
						<text>{{$t('gaming.Transfer')}}</text>
					</view>
				</view>
				<view class="aciton-bth news">
					<view class="noAuth" @click="navigatorTo('share/share')">
						<image src="../../static/Vector.png" mode="scaleToFill" />
						<text>{{$t('gaming.share')}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" round="65" mode="center">
			<view class="popbox">
				<text class="pop-title">{{$t('gaming.rule1')}}</text>
				<rich-text class="pop-main" :nodes="ruleHtml" />
				<button class="popbth" @click="show=false">{{$t('gaming.rule2')}}</button>
			</view>
		</u-popup>
		<view class="advertisement" :class="showAdvertisement?'isShow':''">
			<view class="advertisement-title" v-if="showAdvertisement">
				<view class="title-left">
					<text>广告</text>
					<image class="title-gold" src="../../static/gold.png" mode="widthFix" />
					<u-count-down ref="adverDown" :time="16*1000" format="ss" :autoStart="false" :millisecond="false" />
				</view>
				<view class="title-right" @click="toclose">
					关闭
				</view>
			</view>
			<video v-if="showAdvertisement" id="myVideo" src="/static/12882315_360_640_25fps.mp4"
				@error="videoErrorCallback" :autoplay="true" :controls="false" @ended="videoEnd" @play="videoPlay"/>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showAdvertisement: false,
				countTime: 0,
				show: false,
				ruleHtml: "",
				timedate: 0,
				newCounTime: 0,
				animationMonster: null,
				monsterRotate: false,
				timing: {
					duration: 8000, //速度
					iterations: Infinity
				},
				adverTime:0,
				times: null,
				userInfo: {},
				turnMsg: {},
				videoContext: null,
				videoEnds: false,
			};
		},
		onReady(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onShow() {
			//获取个人信息
			this.getUser()
		},
		methods: {
			//初始化
			startRotate() {
				let element = document.querySelector('.monster-box')
				let keyframes = [{
						transform: 'rotate(0deg)'
					},
					{
						transform: 'rotate(-360deg)'
					}
				];
				this.animationMonster = element.animate(keyframes, this.timing);
				this.animationMonster.pause()
			},
			//获取游戏信息
			async gameMsg() {
				const {
					data: res
				} = await this.$api('/front/getTurnData', 'GET')
				// console.log(res)
				if (res.code != 200) return uni.$u.toast(res.msg)
				this.turnMsg = res.data
				// if(!res.data.turnTime)return uni.$u.toast(this.$t('gaming.tips'))
				// this.countTime = res.data.turnTime
				// this.timedate = res.data.turnTime
				this.countTime = 200000 //要删除
				this.timedate = 200000 //要删除
				if (res.data.turnState) {
					this.playRotate(true)
				} else {
					uni.$u.toast(this.$t('gaming.tips1'))
				}
			},
			//旋转
			async playRotate(isGo) {
				// console.log(this.countTime)
				if (!this.countTime) return uni.$u.toast('to watch the advertisement')
				this.monsterRotate = true
				if (isGo) { //继续转动
					this.animationMonster.play()
				} else { //开始转动 并给后端反馈开始转动
					const {
						data: res
					} = await this.$api('/front/startGame', 'GET')
					if (res.code == 200) {
						this.animationMonster.play()
					} else {
						return uni.$u.toast(res.msg)
					}
				}
			},
			//暂停旋转
			stopRotate() {
				if (this.animationMonster) {
					this.animationMonster.pause()
				}
			},
			//重置
			resetRotate() {
				this.animationMonster.cancel()
				this.monsterRotate = false
			},
			//时间变动
			timechange(e) {
				// console.log(e)
				this.timedate = e.days * 86400000 + e.hours * 3600000 + e.minutes * 60000 + e.seconds * 1000 + e
					.milliseconds
				this.userInfo.rewardValue = (0.1 + Number(this.userInfo.rewardValue)).toFixed(1)
			},
			timeEnd(e) {
				this.countTime = 0
				this.resetRotate()
			},
			navigatorTo(url) {
				uni.navigateTo({
					url: "/pages/" + url
				})
			},
			async getUser() {
				const {
					data: res
				} = await this.$api('/front/getInfo', 'GET')
				// console.log(res)
				this.userInfo = res.data
			},
			//获取游戏规则
			async ruleBth() {
				const {
					data: res
				} = await this.$api('/front/getDocument', 'GET', {
					code: "game_rule"
				})
				this.ruleHtml = res.data
				this.show = true
			},
			//观看广告
			tovideo() {
				this.videoEnds = false
				this.showAdvertisement = true
			},
			//关闭广告
			toclose() {
				if (this.videoEnds) {
					this.addTime(120000)
					this.showAdvertisement = false
				} else {
					uni.showModal({
						title: 'prompt',
						content: 'Unfinished viewing, duration not obtained',
						success: (res) => {
							if (res.confirm) {
								this.showAdvertisement = false
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//增加时长
			addTime(time) {
				this.monsterRotate = false
				this.countTime = this.timedate + time
				this.playRotate(true)
			},
			videoPlay(e){
				this.$refs.adverDown.start();
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			videoEnd(e) {
				this.videoEnds = true
				uni.showModal({
					title: 'prompt',
					content: 'Watch completed, get duration of 2 minutes',
					success: (res) => {
						if (res.confirm) {
							this.addTime(120000)
							this.showAdvertisement = false
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		},
		mounted() {
			// 初始化游戏
			this.startRotate()
		},
		onLoad() {
			this.gameMsg()
		},

	}
</script>

<style lang="scss" scoped>
	.out-main {
		width: 100vw;
		height: 100vh;
		position: relative;

		.advertisement {
			width: 100vw;
			height: 0;
			transition: all 0.8s;
			position: absolute;
			overflow: hidden;
			bottom: 0;
			left: 0;
			z-index: 999;

			.advertisement-title {
				width: 100%;
				display: flex;
				position: absolute;
				top: 0;
				left: 0;
				justify-content: space-between;
				z-index: 9999;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 24rpx;
				color: #fff;

				.title-left {
					display: flex;
					align-items: center;
					background-color: rgba(183, 183, 183, 0.5);
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					gap: 10rpx;
					overflow: hidden;

					.title-gold {
						width: 20rpx;
					}

					/deep/.u-count-down__text {
						font-size: 24rpx;
						color: #fff;
					}
				}

				.title-right {
					background-color: rgba(183, 183, 183, 0.5);
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
				}
			}

			#myVideo {
				width: 100%;
				height: 100%;
				z-index: 9998;
			}
		}

		.isShow {
			height: 100vh;
		}
	}

	.popbox {
		width: 617rpx;
		height: 80vh;
		background-color: #21224C;
		color: #fff;
		border-radius: 53rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 70rpx 32rpx;
		font-family: my-font;

		.pop-title {
			font-size: 62rpx;
		}

		.pop-main {
			height: 60vh;
			overflow-y: auto;
			word-wrap: break-word;
			/* 允许在长单词内部换行 */
			word-break: break-all;
			/* 允许在任意位置换行 */
		}

		.popbth {
			width: 207rpx;
			height: 76rpx;
			border-radius: 30rpx;
			background-color: #fff;
			color: #000;
			line-height: 76rpx;
			font-size: 32rpx;
			margin-top: 40rpx;
		}
	}

	.main {
		width: 100vw;
		background-image: url('../../static/gamingBg.png');
		min-height: 100vh;
		background-size: 100% 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 40rpx 0;
		font-family: my-font;
		color: #fff;
		font-size: 30rpx;

		.top-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding-left: 10rpx;

			.top-left {
				display: flex;
				flex-direction: column;
				gap: 30rpx;

				.left-top {
					display: flex;
					align-items: center;
					gap: 20rpx;

					image {
						width: 120rpx;
					}

					.title-img {
						width: 200rpx;
					}
				}

				.left-bottom {
					display: flex;
					align-items: center;
					gap: 20rpx;
					margin-left: 20rpx;

					.gold-text {
						color: #fff;
						font-size: 26rpx;
						display: flex;
						flex-direction: column;
						gap: 10rpx;

						.gold-value {
							font-weight: bold;
							letter-spacing: 2rpx;
						}
					}

					.image-gold {
						width: 100rpx;
						animation: rotate 6s linear infinite;
						transform-style: preserve-3d;
					}

					@keyframes rotate {
						0% {
							transform: rotateY(0);
						}

						100% {
							transform: rotateY(360deg);
						}
					}

				}
			}

			.top-right {
				color: #fff;
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 20rpx;

				.right-bth {
					width: auto;
					height: 50rpx;
					font-size: 40rpx;
					background-color: rgba(203, 203, 203, 0.4);
					padding: 10rpx 5rpx 5rpx 10rpx;
					display: flex;
					align-items: flex-end;
					border-top-left-radius: 6rpx;
					border-bottom-left-radius: 6rpx;
					gap: 10rpx;

					text {
						flex: 1;
						text-align: right;
						line-height: 60rpx;
					}

					image {
						width: 70rpx;
					}
				}
			}
		}

		.bottom-box {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			padding: 0 40rpx;
			gap: 20rpx;

			.aciton-bth {
				flex: 1;
				position: relative;

				image {
					width: 100%;
				}

				.noAuth {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: #21224C;
					border-radius: 25rpx;
					padding: 50rpx 0;

					image {
						width: 100rpx;
						height: 100rpx;
						background-color: #131145;
						padding: 20rpx;
						border-radius: 50%;
						box-sizing: border-box;
					}

					text {
						text-align: center;
						font-size: 24rpx;
						margin-top: 40rpx;
						color: #74747F;
					}
				}
			}

			.news:before {
				content: "";
				width: 60rpx;
				height: 33rpx;
				z-index: 2;
				position: absolute;
				background-image: url("../../static/news.png");
				background-size: 100% 100%;
				top: -20rpx;
				right: 20rpx;
			}
		}

		.earth-box {
			position: absolute;
			width: 400rpx;
			height: 400rpx;
			top: calc(50vh - 200rpx);
			left: calc(50vw - 200rpx);
			background-image: url('../../static/earth.png');
			// border: 1rpx solid red;
			background-size: 100% 100%;

			.monster-box {
				width: 400rpx;
				height: 400rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;

				.monster {
					width: 120rpx;
					height: 150rpx;
					position: absolute;
					top: -120rpx;
					left: 160rpx;
				}

				.beginClass {
					transition: all 0.5s ease;
					transform: rotate(-51.08deg);
				}

				.endClass {
					transform: rotate(0deg);
				}

				.progress {
					position: absolute;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					left: 80rpx;
					top: -130rpx;
					transform: rotate(-70deg);

					/deep/.u-count-down__text {
						font-size: 22rpx;
						color: #fff;
						font-weight: 400;
						letter-spacing: 4rpx;
					}
				}
			}

		}
	}
</style>